<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-audio">
      <input-normal v-if="commonAttr.url" label="地址" v-model="commonAttr.url" @change="onChangeAttr"></input-normal>
      <p class="margin-left-right-16">封面</p>
      <add-img-con :url="commonAttr.cover" comAttr="commonAttr" picAttr="cover" :isCrop="false" :isDelete="true" :height="100" class="margin-left-right-16"></add-img-con>
      <input-normal label="封面" v-model="commonAttr.cover" @change="onChangeAttr"></input-normal>
      <input-normal label="主题色" v-model="commonAttr.theme" @change="onChangeAttr"></input-normal>
      <input-normal label="歌词" v-model="commonAttr.lrc" @change="onChangeAttr"></input-normal>
      <slider-normal v-model="commonAttr.volume" label="音量" :max="1" :step="0.1" @change="onChangeAttr"></slider-normal>
      <input-normal label="标题" v-model="commonAttr.name" @change="onChangeAttr"></input-normal>
      <input-normal label="作者" v-model="commonAttr.artist" @change="onChangeAttr"></input-normal>
      <textarea-normal label="自定义参数" v-model="commonAttr.params" placeholder='{"coverWidth":68,"coverHeight":68}' @change="onChangeAttr"></textarea-normal>
      <switch-normal v-model="commonAttr.isFiexed" label="固定在底部" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isMini" label="最小化" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isAutoPlay" label="自动播放声音" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isDisplayControls" label="显示控制条" @change="onChangeAttr"></switch-normal>
    </el-form>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'

  import { editUtils } from '@/views/js/edit-utils'

  export default {
    name: "RightAudio",
    mixins: [editUtils],
    components: {
      RightTemplate,
      SwitchNormal,
      AddImgCon,
      InputNormal,
      TextareaNormal,
      SliderNormal,
    },
  };
</script>
